<template>
	 <div class="activiesBar" ref="activities">
        <span class="package" style="margin-right:.2rem;float:left;">{{saleType[0]}}</span>
        <div style="float:left;width:90%;">
            <div class="title">
                <!-- <div> -->
                    <span class="activityName">{{FixedList.packageName}}</span>
                    <!-- <span class="seeDetail" style="color: white;float:right;float:right;margin-right:1rem;">查看详情</span> -->
                    <!-- <span class="arrow" ref="arrow" @click="gogogo"><i class="icon njfont nj-youjiantou"></i></span> -->
                <!-- </div> -->
                <!-- <div>
                    <span class="activityTime">活动时间：{{regularList.activityStartTime.split(" ")[0].split("-")[1]}}.{{regularList.activityStartTime.split(" ")[0].split("-")[2]}}-{{regularList.activityEndTime.split(" ")[0].split("-")[1]}}.{{regularList.activityEndTime.split(" ")[0].split("-")[2]}}</span>
                    <span class="arrow" ref="arrow" @click="spread"></span>
                </div> -->
                <!-- <span class="arrow" ref="arrow" @click="spread"></span> -->
            </div>
            <!-- <div class="activeCond" ref="activeCond">
                <span style="color: rgb(102, 102, 102);" @click="gogogo">{{FixedList.packageInfo}}</span>
            </div>
            <div class="activeInfo" ref="activeInfo">
                <span style="color: rgb(102, 102, 102);" @click="gogogo">同时购买<span v-for="(item,index) in FixedList.fixedPackageGoodsList" :key="index">{{item.goodsQuantity}}份{{item.goodsName}}<span v-if="index != FixedList.fixedPackageGoodsList.length - 1">和</span></span>可享受{{FixedList.packagePrice}}元特价
                </span>
            </div> -->
        </div>
        <!-- <router-link class="activityNameSp" :to="{ path: 'regularmeal', query: { regularId: regularList.regularId }}">组合套餐优惠</router-link> -->
	</div> 
</template>
<script>
	export default {
		props: {
            FixedList: {
                type: Object,
                default: {}
            },
        },
        components:{
            
        },
		data () {
			return {
                saleType:["组","package"],
			}
		},
		computed: {
            
		},
		methods: {
            spread(){
                let activities = this.$refs.activities;
                let arrow = this.$refs.arrow;
                let activeInfoHeight = this.$refs.activeInfo.offsetHeight;
                let activeCondHeight = this.$refs.activeCond.offsetHeight;
                console.log(activeInfoHeight,activeCondHeight,"height");
                if(parseInt(activities.style.height) > 23){
                    activities.style.height = 23 + "px";
                }else{
                    activities.style.height = 23 + activeInfoHeight + activeCondHeight + "px";
                }
            },
            gogogo(){
                this.$router.push("regulardetail?fixedPackageId=" + this.FixedList.fixedPackageId);
            }
        },
        created () {
            
        },
        mounted () {
            console.log(this.FixedList,"FixedList");
            
        },
        beforeDestroy() {
            
        },
        watch: {
            
        }

	}
</script>

<style scoped>
    .activiesBar{
        /*margin-left: .25rem;*/
        height:1.3rem;
        transition: .5s all;
        overflow: hidden;
        padding: 0.1rem 0
    }
    .activiesBar i{
        color:#a0a0a0;
        font-size: 0.7rem
    }
    .package{
        font-size:12px;
        background: #EF5423;
        padding:0 2px;
        margin-top:3px;
        /* border-radius: .2rem; */
        color: white;
    }
    .blank{
        margin-right: 0.2rem;
        font-size:12px;
        background: white;
        padding: 2px;
        border-radius: .2rem;
        color: white;
    }
    .activityName{
        display: inline-block;
        width: 13rem;
        height: 100%;
        color: #444444;
        text-align: left;
        line-height: 1.2rem;
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .activityTime{
        display: inline-block;
        height: 100%;
        line-height: 23px;
        color: #a0a0a0;
        text-align: left;
    }
    .title{
        height: 23px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .arrow{
        display: inline-block;
        margin:0 0.2rem;
        width: 14px;
        height: auto;
        transition: .5s all;
        transform: rotate(0deg);
        transform-origin: .25rem 0.45rem;
        /* border-top: 10px solid rgb(102, 102, 102);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 0px solid transparent; */
        color:#a0a0a0
    }
    .arrow img{
        width: 80%;
        margin-top: .25rem;
        transform: rotate(90deg);
    }
    .activeCond{
        width: 95%;
        text-align: left;
    }
    .activeInfo{
        width: 95%;
        text-align: left;
    }
    .seeDetail{
        display: inline-block;
        width: 3.2rem;
        height: 1rem;
        background: transparent;
        color: white;
        border-radius: .2rem;
    }
</style>


